$(function () {
  let id = location.href.substring(location.href.indexOf('=') + 1)
  getDetails()
  async function getDetails() {
    const { data: { data: res } } = await axios.get('http://124.223.14.236:3001/api/recipeInfo/' + id, {
      params: {
        id,
      }
    })

    $('.title-box h3').html(res.title)
    $('.title-box p').html(res.author)
    document.querySelector('.show-img').src = 'http://124.223.14.236:3001/public/' + res.img
    $('.txt_tart').html(res.description)

    $('#title').html(`${res.title}的做法步骤`)

    $('.context').html(res.context)
    // console.log(Array.from(JSON.parse(res.raw_fu_list)));
    // console.log(Array.from(JSON.parse(res.raw_list)));
    // console.log(Array.from(JSON.parse(res.raw_type)));
    render(Array.from(JSON.parse(res.raw_fu_list)), 'raw_fu_list')
    render(Array.from(JSON.parse(res.raw_list)), 'raw_list')
    render(Array.from(JSON.parse(res.raw_type)), 'raw_type')

    // console.log(res.raw_tl_list);
    // console.log(Array.from(JSON.parse(res.raw_tl_list)));
    render(Array.from(JSON.parse(res.raw_tl_list)), 'raw_tl_list')


  }



  // 封装料的渲染函数
  function render(newarr, dom) {
    const arrStr = newarr.map(item => `
      <li>
        <span class="category_s1">
            <a href="/YuanLiao/ZhongJinMianFen/" title="${item.name}" target="_blank"><b>${item.name}</b></a>
        </span>
        <span class="category_s2">${item.num}</span>
      </li>
    `).join('')
    $(`.${dom}`).html(arrStr)




  }
})